@import '../common/style/index.less';

// 状态色 - 默认色

@link-default-color: var(--td-link-default-color, @text-color-primary); // default 主题默认态颜色
@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色
@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色

// 状态色 - 主色
@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色
@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色
@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色

// 状态色 - 成功
@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色
@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色
@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色

// 状态色 - 警告
@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色
@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色
@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色

// 状态色 - 危险
@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色
@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色
@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色

// 字号
@link-content-small-font-size: 24rpx;
@link-content-small-line-height: 40rpx;
@link-icon-small-font-size: 28rpx;

@link-content-medium-font-size: 28rpx;
@link-content-medium-line-height: 44rpx;
@link-icon-medium-font-size: 32rpx;

@link-content-large-font-size: 32rpx;
@link-content-large-line-height: 48rpx;
@link-icon-large-font-size: 36rpx;

@themes: primary, success, warning, default, danger;

@link: ~'@{prefix}-link';

.link-size(@size) {
  @contentFontSize: 'link-content-@{size}-font-size';
  @contentLineHeight: 'link-content-@{size}-line-height';
  @iconSize: 'link-icon-@{size}-font-size';

  .@{link}--@{size} {
    .@{link}__content {
      font-size: @@contentFontSize;
      line-height: @@contentLineHeight;
    }
    .@{link}__prefix-icon,
    .@{link}__suffix-icon {
      font-size: @@iconSize;
    }
  }
}

.link-theme(@theme) {
  @color: 'link-@{theme}-color';
  @activeColor: 'link-@{theme}-active-color';
  @disabledColor: 'link-@{theme}-disabled-color';

  .@{link}--@{theme} {
    color: @@color;

    &.@{link}--underline::after {
      border-color: @@color;
    }

    &.@{link}--disabled {
      color: @@disabledColor;
    }

    &.@{link}--hover {
      color: @@activeColor;

      &.@{link}--underline::after {
        border-color: @@activeColor;
      }
    }
  }
}

.link-size(small);
.link-size(medium);
.link-size(large);

.link-theme(primary);
.link-theme(success);
.link-theme(warning);
.link-theme(default);
.link-theme(danger);

.@{link} {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: content-box;

  &--underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    opacity: 1;
    border-bottom: 2rpx solid rgb(205, 11, 231);
  }

  &__prefix-icon:not(:empty) + &__content:not(:empty) {
    padding-left: 8rpx;
  }

  &__content:not(:empty) + &__suffix-icon:not(:empty) {
    padding-left: 8rpx;
  }
}
